<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext){
                var ctx = canvas.getContext('2d');

                for(var i=0;i<4;i++){//  四行
                    for(var j=0;j<3;j++){//  三列
                        ctx.beginPath();
                        var x = 25+j*50; // x 坐标值
                        var y = 25+i*50; // y 坐标值
                        var radius = 20; // 圆弧半径
                        var startAngle = 0; // 开始点
                        var endAngle = Math.PI+(Math.PI*j)/2; // 结束点
                        var anticlockwise = i%2==0 ? false : true; // 顺时针或逆时针

                        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

                        if (i>1){
                            ctx.fill();
                        } else {
                            ctx.stroke();
                        }
                    }
                }
            }
        }
    </script>
</head>
<body onload="draw()">
<canvas id="canvas" height="300px" width="300px"></canvas>
</body>